<template>
  <el-tabs type="border-card">
    <el-tab-pane label="游戏设置" class="main-h-center">
      <div style="width:460px">
        <el-form label-width="100px" :model="game">
          <el-form-item label="游戏名称" prop="name">
            <el-input v-model="game.name" placeholder="用来在客户端显示"></el-input>
          </el-form-item>

          <el-form-item label="游戏编号" prop="code">
            <el-input v-model="game.code" placeholder="游戏唯一编号" disabled></el-input>
          </el-form-item>

          <el-form-item label="游戏图标" prop="icon">
            <el-input v-model="game.icon" disabled placeholder="应该是64*64的大小的图片">
              <el-upload
                slot="append"
                :action="$baseUrl+'/upload/image'"
                :headers="headers"
                :multiple="false"
                :show-file-list="false"
                :on-error="handleUploadError"
                :on-success="handleUploadIconSuccess"
              >
                <el-button size="small" icon="el-icon-upload">上传</el-button>
              </el-upload>
            </el-input>
          </el-form-item>

          <el-form-item label="游戏详情" prop="home_page">
            <el-input v-model="game.home_page " disabled placeholder="应该是一个html文档">
              <el-upload
                slot="append"
                :action="$baseUrl+'/upload/html'"
                :headers="headers"
                :multiple="false"
                :show-file-list="false"
                :on-error="handleUploadError"
                :on-success="handleUploadHtmlSuccess"
              >
                <el-button size="small" icon="el-icon-upload">上传</el-button>
              </el-upload>
            </el-input>
          </el-form-item>
          <el-form-item label="应用名称" prop="app_name">
            <el-input v-model="game.app_name" placeholder="用来在客户端查找并启动游戏"></el-input>
          </el-form-item>
          <el-form-item label="游戏状态" prop="status">
            <el-select placeholder="请选择游戏状态" v-model="game.status">
              <el-option label="正常运营" :value="1"></el-option>
              <el-option label="停止运营" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleAdd">立即保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-tab-pane>
    <el-tab-pane label="客户端相关" class="main-h-center">
      <div style="width:460px">
        <el-form label-width="100px" :model="game">
          <el-form-item label="软件版本" prop="version">
            <el-input v-model="game.version"></el-input>
          </el-form-item>
          <el-form-item label="下载地址" prop="down_url">
            <el-input v-model="game.down_url"></el-input>
          </el-form-item>
          <el-form-item label="强制更新" prop="is_up">
            <el-select placeholder="请选择" v-model="game.is_up">
              <el-option label="是" :value="true"></el-option>
              <el-option label="否" :value="false"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleAdd">立即保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-tab-pane>
    <el-tab-pane label="更新日志" class="main-h-center">
      <div style="width:600px">
        <el-form label-width="0">
          <el-form-item label>
            <el-input type="textarea" :rows="9" v-model="game.up_log"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="float:right" @click="handleAdd">立即保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-tab-pane>
    <el-tab-pane label="游戏公告" class="main-h-center">
      <div style="width:600px">
        <el-form label-width="0">
          <el-form-item label>
            <el-input type="textarea" :rows="9" v-model="game.notice"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="float:right" @click="handleAdd">立即保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
export default {
  data() {
    return {
      headers: {
        Authorization: "Bearer " + localStorage.getItem("higame-token")
      },
      game: {
        name: "",
        code: "",
        status: 1,
        version: "",
        down_url: "",
        is_up: false,
        notice: "",
        up_log: "",
        icon: "",
        home_page: "",
        app_name: ""
      }
    };
  },
  methods: {
    async handleAdd() {
      if (this.$utils.isNullOrEmpty(this.game.name)) {
        this.$message.error("软件名称不能为空！");
        return;
      }
      if (this.$utils.isNullOrEmpty(this.game.code)) {
        this.$message.error("软件编号不能为空！");
        return;
      }
      if (this.$utils.isNullOrEmpty(this.game.icon)) {
        this.$message.error("软件图标不能为空！");
        return;
      }
      if (this.$utils.isNullOrEmpty(this.game.home_page)) {
        this.$message.error("软件详情页面不能为空！");
        return;
      }
      if (this.$utils.isNullOrEmpty(this.game.app_name)) {
        this.$message.error("软件启动应用名称不能为空！");
        return;
      }
      if (this.$utils.isNullOrEmpty(this.game.version)) {
        this.$message.error("软件版本号不能为空！");
        return;
      }
      if (this.$utils.isNullOrEmpty(this.game.down_url)) {
        this.$message.error("软件下载地址不能为空！");
        return;
      }
      this.$http
        .post("/game/create", this.game)
        .then(res => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: "success"
            });
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    handleUploadError(err, file, fileList) {
      this.$message.error(err.toString());
    },
    handleUploadIconSuccess(res, file, fileList) {
      if (res.code == 200) {
        this.$message({
          message: "上传成功！",
          type: "success"
        });
        this.game.icon = res.data;
      } else {
        this.$message.error(res.msg);
      }
    },
    handleUploadHtmlSuccess(res, file, fileList) {
      if (res.code == 200) {
        this.$message({
          message: "上传成功！",
          type: "success"
        });
        this.game.home_page = res.data;
      } else {
        this.$message.error(res.msg);
      }
    }
  },
  async created() {
    this.$http
      .post("/game/generatecode", this.game)
      .then(res => {
        if (res.code == 200) {
          this.game.code = res.data;
        } else {
          this.$message.error(res.msg);
        }
      })
      .catch(err => {
        this.$message.error(err.msg);
      });
  }
};
</script>
<style>
</style>

